<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('查询信件工单')"/>
    <style>
        .modal-backdrop {

            filter: alpha(opacity=0) !important;

            opacity: 0 !important;

        }
    </style>
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="post-form">
                <div class="select-list">
                    <ul>
                        <li>
                            流水号：<input type="text" name="wsCode"/>
                        </li>
                        <li>
                            联系电话：<input type="text" name="fromTel"/>
                        </li>
                        <li>
                            来信人：<input type="text" name="fromName"/>
                        </li>
                        <li>
                            来信内容：<input type="text" name="fmContent"/>
                        </li>
                        <li>
                            工单编号：<input type="text" name="workFormNo"/>
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i
                                    class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i
                                    class="fa fa-refresh"></i>&nbsp;重置</a>
                            <!--                                                        <a class="btn btn-success" onclick="highLevelSearch()">-->
                            <!--                                                            <span class="glyphicon glyphicon-zoom-out" aria-hidden="true">高级查询</span>-->
                            <!--                                                        </a>-->
                            <button type="button" class="btn btn-primary btn-sm" data-toggle="modal"
                                    data-backdrop="static" data-target="#myModal">
                                <i class="glyphicon glyphicon-zoom-out bt-search"></i>&nbsp;高级查询
                            </button>
                        </li>
                    </ul>
                </div>
            </form>
            <form id="form-user-add">
                <div class="modal inmodal" id="myModal" role="dialog" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content animated bounceInRight">
                            <!--                            <button type="button" class="close" data-dismiss="modal"><span-->
                            <!--                                    aria-hidden="true">X</span><span class="sr-only">关闭</span>-->
                            <!--                            </button>-->
                            <div class="modal-body">
                                <div>
                                    <a href="javascript:void(0);" onclick="snrFindCdtnShow()">查看条件</a>
                                    <a href="javascript:void(0);" onclick="snrCdtnClear()">清空条件</a>
                                </div>
                                <div id="dlg_Setbar" style="margin-bottom:10px;">
                                    <span class="spLBlue">点击这里增加条件设置：</span>
                                    <a href="javascript:void(0);" class="btn btn-primary glyphicon glyphicon-plus"
                                       role="button"
                                       title="增加条件" onClick="snrAddCd(cdtnsSnr);"></a>
                                </div>
                                <div id="cdtnCell">
                                    <table id="tabSnrCdtn" cellspacing="1" cellpadding="1" width="98%"
                                           border="0">
                                        <tr>
                                            <td><select name="cdnField" class="form-control formSelect"
                                                        style="width: 100px">
                                                <option value="WsCode">流水号</option>
                                                <option value="WorkFormNO">工单编号</option>
                                                <option value="SetProName">工单性质</option>
                                                <option value="FromTel">来电号码</option>
                                                <option value="FromName">来电人名</option>
                                                <option value="FmAreaName">所属地区</option>
                                                <option value="IptWorker">派单人</option>
                                                <option value="fromTopic">主题</option>
                                                <option value="fmContent">信件内容</option>
                                            </select></td>
                                            <td><select name="cdnOper" class="form-control formSelect"
                                                        style="width: 90px">
                                                <option value="201">包含</option>
                                                <option value="101">等于</option>
                                                <option value="202">不包括</option>
                                                <option value="102">不等于</option>
                                                <option value="120">大于</option>
                                                <option value="110">小于</option>
                                            </select></td>
                                            <td align="left"><input name="cdnKey" class="form-control"
                                                                    type="text" maxlength="30"></td>
                                            <td><a href="javascript:void(0);"
                                                   class="btn btn-danger glyphicon glyphicon-minus"
                                                   role="button" title="移除此条件"
                                                   onclick="snrRemoveCdtn(this)" alt="移除此条件"></a></td>
                                            <td><select name="cdnCnt" class="form-control formSelect"
                                                        style="width: 80px">
                                                <option value="and">并且</option>
                                                <option value="or">或者</option>
                                            </select></td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-primary" onclick="submitHandler()">确定</button>
                                <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table" class="table-striped"></table>
        </div>
    </div>
</div>
<th:block th:include="include :: footer"/>
<script th:inline="javascript">

    var prefix = ctx + "system/lookup";

    $(function () {
        var options = {
            url: prefix + "/mailWFList",
            createUrl: prefix + "/add",
            detailUrl: "/system/lookup/mailOrderDetail/{id}",
            sortName: "pkId",
            sortOrder: "desc",
            uniqueId: "pkId",
            modalName: "信件工单",
            fixedColumns: true,
            fixedNumber: 2,
            fixedRightNumber: 1,
            columns: [{
                checkbox: true
            },
                {field: 'pkId', title: 'pkId', visible: false},
                {field: 'getDealPk', title: 'telId', visible: false},
                {field: 'workFormNo', title: '工单编号', align: 'left', halign: 'center', sortable: true},
                {
                    field: 'setProId', title: '性质', align: 'center', formatter: function (value, row, index) {
                        return fmtWFormSort(value, row, index);
                    }
                },
                {field: 'fromTopic', title: '主题', align: 'left', halign: 'center', sortable: true},
                {field: 'fmAreaName', title: '属地', align: 'left', halign: 'center', sortable: true},
                {field: 'fromName', title: '来电人', align: 'center', sortable: true},
                {field: 'fromTel', title: '联系电话', align: 'center', sortable: true},
                {field: 'dfmClaName', title: '诉求类别', align: 'center', sortable: true},
                {field: 'iptTime', title: '创建日期', align: 'center', sortable: true
                    ,formatter:function(value,row,index) {return interceptDate(value,row,index)}
                },
                {
                    field: 'openX',
                    title: '公开',
                    align: 'center',
                    sortable: true,
                    formatter: function (value, row, index) {
                        return fmtWFormOpen(value, row, index);
                    }
                },
                {field: 'wfLimit', title: '办理时限', align: 'center',formatter:function(value,row,index) {return interceptDate(value,row,index)}},
                {field: 'crtStepName', title: '当前流程', align: 'left', halign: 'center'},
                {
                    title: '操作',
                    align: 'center',
                    formatter: function (value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-success btn-outline btn-xs " href="javascript:void(0)" onclick="$.operate.detailTab(\'' + row.pkId + '\')">查看</a> ');
                        return actions.join('');
                    }
                }]
        };
        $.table.init(options);
    });


    var cdtnsSnr = [{
        field: 'WsCode',
        showText: '流水号'
    }, {
        field: 'WorkFormNO',
        showText: '工单编号'
    }, {
        field: 'SetProName',
        showText: '工单性质'
    }, {
        field: 'FromTel',
        showText: '来电号码'
    }, {
        field: 'FromName',
        showText: '来电人名'
    }, {
        field: 'FmAreaName',
        showText: '所属地区'
    }, {
        field: 'IptWorker',
        showText: '派单人'
    }, {
        field: 'fromTopic',
        showText: '主题'
    }, {
        field: 'fmContent',
        showText: '信件内容'
    }];

    function snrAddCd(fpJson) {
        var tabObj = document.getElementById("tabSnrCdtn");
        var tRs = tabObj.rows.length;
        var nwRw = tabObj.insertRow(tRs);
        var clA = nwRw.insertCell(0);
        var clB = nwRw.insertCell(1);
        var clC = nwRw.insertCell(2);
        var clD = nwRw.insertCell(3);
        var clE = nwRw.insertCell(4);

        var fldNames = ""; //fldPro(1=string,2=number,3=datetime)
        $.each(fpJson, function (i, n) {
            fldNames += '<option value="' + n.field + '">' + n.showText + '</option>';
        });
        clA.innerHTML = "<select name=\"cdnField\" class=\"form-control formSelect\" style=\"width: 100px\">" + fldNames + "</select>";
        // clA.height = "28";

        var opStr = '<select name="cdnOper"  class="form-control formSelect" style="width: 90px"><option value="201">包含</option><option value="101">等于</option><option value="202">不包括</option><option value="102">不等于</option><option value="120">大于</option><option value="110">小于</option></select>';
        clB.innerHTML = opStr;


        var cntDdl = '<select name="cdnCnt" class="form-control formSelect" style="width: 80px"><option value="and">并且</option><option value="or">或者</option></select>';
        clE.innerHTML = cntDdl;

        var keyIpt = '<input name="cdnKey" class="form-control" type="text" maxlength="30"  />';
        clC.innerHTML = keyIpt;
        clC.align = "left";

        var rmvBtn = '<a href="javascript:void(0);" class="btn btn-danger glyphicon glyphicon-minus" role="button"  title="移除此条件" onClick="snrRemoveCdtn(this)" alt="移除此条件" />';
        clD.innerHTML = rmvBtn;

    }

    function snrRemoveCdtn(e) {
        var rIdx = e.parentNode.parentNode.rowIndex;
        //alert(rIdx);
        document.getElementById("tabSnrCdtn").deleteRow(rIdx);
    }

    //    关闭
    function gclose() {
        $.modal.close();
    }

    var prefix = ctx + "system/lookup";

    function submitHandler() {
        var tabObj = document.getElementById("tabSnrCdtn");
        var tRs = tabObj.rows.length;
        var showStr = 'goto Search';
        var canSch = false;
        if (tRs < 1) {
            showStr = '<span class="f14 spLRed">您没有设置任何条件！</span>';
            $.modal.alert(showStr);
            return false;
        } else {
            showStr = '<span class="f14 spLRed">您没有设置有效的查询条件！</span>';
            for (var i = 0; i < tRs; i++) {
                var objCnt = tabObj.rows[i].cells[2].childNodes[0];
                var tmpKey = objCnt.value.trim();
                if (tmpKey.length > 0) {
                    canSch = true;
                }
            }
        }
        if (!canSch) {
            $.modal.alert(showStr)
        } else {
            $.table.search('form-user-add')
        }
    }

    function snrCdtnClear() {
        var tabObj = document.getElementById("tabSnrCdtn");
        var tRs = tabObj.rows.length;
        for (var i = 0; i < tRs - 1; i++) {
            tabObj.deleteRow(0);
            let objKey = tabObj.rows[0].cells[2].childNodes[0];
            objKey.value = "";
        }
    }

    function snrFindCdtnShow() {
        var tabObj = document.getElementById("tabSnrCdtn");
        var tRs = tabObj.rows.length;
        var showStr = 'the condition';
        if (tRs < 1) {
            showStr = '<span class="f14 spLRed">系统提示：您没有设置任何条件！</span>';
            $.modal.alert(showStr);
        } else {
            showStr = "";
            for (var i = 0; i < tRs; i++) {
                var objFld = tabObj.rows[i].cells[0].childNodes[0];
                var objOP = tabObj.rows[i].cells[1].childNodes[0];
                var objKey = tabObj.rows[i].cells[2].childNodes[0];
                var objCnt = tabObj.rows[i].cells[4].childNodes[0];
                showStr += objFld.options[objFld.selectedIndex].text + " <span class='spRed'>" + objOP.options[objOP.selectedIndex].text + "</span> <span class='spLBlue'>" + objKey.value + "</span> <span class='spOrange'>" + objCnt.options[objCnt.selectedIndex].text + "</span><br/><br/>";
            }
            $.modal.alert(showStr);
        }
    }

    $('#bootstrap-table').on('page-change.bs.table', function (e, number, size) {
        $('#pageNum').val(number)
        let data = $('#form-user-add').serializeArray();
        var config = {
            url: prefix + "/mailWFList",
            type: "post",
            dataType: "json",
            data: data,
            success: function (result) {
                $('#bootstrap-table').bootstrapTable('load', result);
            }
        };
        $.ajax(config);
    });
</script>
</body>
</html>